<template>
  <div class="home-page">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>Easy-UI</h1>
    <span>Use vue 3.0 + TypeScript + vue-router 4.0 to build a components lib</span><br />
    <Button shape="circle" type="primary" danger size="large" @onClick="routeJump">Get Started</Button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Button from '/@/components/Button/index.vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'Nav',
  components: {
    Button,
  },
  setup() {
    const router = useRouter()
    function routeJump() {
      router.push('introduct')
    }
    return {
      routeJump,
    }
  },
})
</script>

<style lang="scss" scoped>
.home-page {
  width: 100%;
  color: white;
  text-align: center;
  padding-top: 250px;
  background-image: linear-gradient(to right, #4756e1, #985ef4);
  h1 {
    margin-top: 100px;
    font-size: 32px;
  }
  span {
    display: inline-block;
    margin: 16px 0;
  }
}
</style>
